<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        #time{position: relative;width: 200px;height: 200px;background: orangered;margin: 100px auto;padding-top: 10px;}
        #time span{width: 30px;height: 30px;display: inline-block;line-height: 30px;font-size: 20px;}
        #time #hour{margin-left: 40px;}
        #time i{font-style: normal;margin-right: 10px;}
        #time button{width: 150px;height: 40px;border-radius: 10px;margin: 20px 25px;font-size: 18px;border: none;overflow: hidden;background: black;color: #fff;outline: none;}
        #time #reset{margin-top: 15px;}
        #time button:hover{background: rgba(0, 222, 111, .5);}
    </style>
</head>
<body>
    <div id="time">
        <span id="hour">00</span>
        <i>:</i>
        <span id="min">00</span>
        <i>:</i>
        <span id="sec">00</span>
        <button id="btn1">开始</button>
        <button id="reset">重置</button>
    </div>
    <script>
        var hour = document.getElementById("hour");
        var min = document.getElementById("min");
        var sec = document.getElementById("sec");
        var btn1 = document.getElementById("btn1");
        var reset = document.getElementById("reset");
        var flag = true;//默认是开始按钮
        var i = 0;
        var timer = null;
        btn1.onclick = function(){
            if(flag === true){
                btn1.innerHTML = '暂停';
                flag = false;
                running();
            }else{
                btn1.innerHTML = '开始';
                flag = true;
                pauseFun();
            }
        }
        reset.onclick = function(){
            clearInterval(timer);
            i = 0;
            sec.innerHTML = '00';
            min.innerHTML = '00';
            hour.innerHTML = '00';
            btn1.innerHTML = '开始';
            flag = true;
        }
        function running(){
            timer = setInterval(function(){
                i++;
                sec.innerHTML = getNUM(i % 60);
                min.innerHTML = getNUM(parseInt(i / 60) % 60);
                hour.innerHTML = getNUM(parseInt(i / 3600))

            },1000)
        }
        function pauseFun(){
            clearInterval(timer);
        }
        function getNUM(num){
            if(num > 9){
                return num;
            }else{
                return '0'+num;
            }
        }
    </script>
</body>
</html>